<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h2>员工信息</h2>
    <table
      border="1"
      width="400"
      class="employee"
      style="border-collapse: collapse"
    >
      <tr>
        <th>员工编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
        <th>家庭住址</th>
      </tr>
    </table>

    <ul class="score"></ul>

    <table
      class="studens"
      border="1px"
      width="500px"
      style="border-collapse: collapse"
    >
      <caption>
        学生成绩表
      </caption>
      <thead>
        <tr>
          <th>学号</th>
          <th>姓名</th>
          <th>性别</th>
          <th>年龄</th>
          <th>成绩</th>
          <th>住址</th>
        </tr>
      </thead>
    </table>
  </body>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
  <script>
    //1.对象表示方式
    var obj = {
      id: "0082648",
      name: "Tom",
      sex: "male",
      age: "18",
      addr: "ShenZhen",
    };
    console.log(obj);

    //数据添加
    var dataTable = $(
      "<tr><td>" +
        obj.id +
        "</td><td>" +
        obj.name +
        "</td><td>" +
        obj.sex +
        "</td><td>" +
        obj.age +
        "</td><td>" +
        obj.addr +
        "</td></tr>"
    );
    $(".employee").append(dataTable);

    //2.数组
    var score = [78, 89, 90, 100, , 56, 88];
    //数据添加
    score.forEach(function (value, index) {
      console.log(value);
      $(".score").append("<li>" + value + "</li>");
    });

    //3.复杂表示法（对象+数组）
    var studentsData = [
      {
        id: "13082648",
        name: "Tom",
        sex: "male",
        age: 18,
        score: [78, 89, 90, 100, 33, 56, 88],
        addr: "ShenZhen",
      },
      {
        id: "12482648",
        name: "Jek",
        sex: "female",
        age: 18,
        score: [78, 99, 90, 10, 94, 96, 88],
        addr: "ShangHai",
      },
      {
        id: "25482648",
        name: "Mare",
        sex: "male",
        age: 19,
        score: [48, 39, 90, 100, 45, 56, 88],
        addr: "BeiJing",
      },
    ];
    //渲染数据
    for (var i in studentsData) {
      //遍历成绩数组 一般不需要studentsData[i].score会自动处理
      /*var arryData = "";
      for (var j in studentsData[i].score) {
        arryData += studentsData[i].score[j] + ",";
      }*/
      var data = $(
        "<tr><td>" +
          studentsData[i].id +
          "</td><td>" +
          studentsData[i].name +
          "</td><td>" +
          studentsData[i].sex +
          "</td><td>" +
          studentsData[i].age +
          "</td><td>" +
          //studentsData[i].score+或
          studentsData[i].score.join(" ") +
          "</td><td>" +
          studentsData[i].addr +
          "</td></tr>"
      );
      //倒序添加数据
      $(".studens").prepend(data);
    }
  </script>
</html>
